<template>
	<el-container class="wrapper">
		<el-header class="header">
			<div class="logo">
				<svg class="icon icon-logo">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use>
                </svg>
				{{sysName}}
			</div>
			<div class="crocUser">
				<svg class="icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
                </svg>
				<span>{{sysUserName}}</span>|<span class="logout" @click="logoutFn">退出</span>
			</div>
		</el-header>
		<el-container>
			<el-aside class="menu">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo"
					unique-opened router>
					<template v-for="(item,index) in $router.options.routes" v-if="hidden(item)">
						<el-submenu v-if="!item.leaf" :index="index+''" :key="index">
							<template slot="title">
								<svg class="icon">
									<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#${item.iconCls}`"></use>
								</svg>
								{{item.name}}
							</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path" :key="item.children[0].path">
							<svg class="icon">
								<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="`#${item.iconCls}`"></use>
							</svg>
							{{item.children[0].name}}
						</el-menu-item>
					</template>
				</el-menu>
			</el-aside>
			<el-main class="content">
				<div class="breadcrumb-container">
					<strong class="title">{{$route.name}}</strong>
					<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">
						<el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path }" :key="item.path">
							{{ item.name }}
						</el-breadcrumb-item>
					</el-breadcrumb> -->
				</div>
				<router-view/>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { logout } from '@/api';
	export default {
		data() {
			return {
				sysName: '版权云开放平台管理系统',
				sysUserName: '',
				right_id: '',
			}
		},
		mounted() {
			if(this.crocUser){
				this.right_id = this.crocUser.right_id;
				this.sysUserName = this.crocUser.nickname || this.crocUser.username || '';
			}else{
				this.OUT_LOGIN();
				this.$router.push('/login');
			}
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			hidden(item){ 
				//权限展示判断条件
                if(!item.hidden && this.right_id.indexOf(item.right_id) != -1){
                    return true;
				}else {
                	return false;
				}
            },
			//退出登录
			logoutFn() {
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					let para = {
						uid: this.crocUser.uid
					}
					logout(para).then(res => {
						let {data, msg} = res;
						// if(!data){
							// this.$message.error(msg);
						// }else {
							this.OUT_LOGIN();
							this.$router.push('/login');
						// }
					});
				}).catch(() => {

				});
			},
		}
	}

</script>

<style scoped lang="scss">
.icon-logo {
	width: 1.5em; height: 1.5em;
	vertical-align: -0.35em;
}
.breadcrumb-container {
	margin-bottom: 20px;
	.title {
		// width: 200px;
		// float: left;
		color: #475669;
	}
	// .breadcrumb-inner {
	// 	float: right;
	// }
}
.wrapper{
	height: 100%;
}
.header {
	background-color: #5E87B0;
	color:#fff;
	display: flex;
	justify-content: space-between;
	line-height: 60px;
	.logo {
		font-size: 20px;
		font-weight: 700;
	}
	.crocUser {
		font-size: 14px;
		span {
			padding:0 5px;
		}
	}
}
.menu {
	.el-menu {
		height: 100%;
	}
	.active{
		color:#5E87B0
	}
}
.content {
    padding: 20px;
}
.logout {
	cursor: pointer;
}
.logout:hover {
	color:#f2f2f2;
}
</style>